<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试Vue的Ajax写法</title>
		<link href="../CSS/button_Submit_Reset.css" rel="stylesheet" />
	</head>
	<body>
		<!-- 需求 -->
		<div id="user">

			<!-- 用于更新的div -->
			<div :style="divStyle">
				<table class="tableClass1">
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th colspan="2">操作</th>
					</tr>
					<tr>
						<!-- 注意用v-model -->
						<!-- <td><input type="text" v-model="user.id"disabled/></td> -->
						<td v-text="user.id"></td>
						<td><input type="text" v-model="user.name" /></td>
						<td><input type="text" v-model="user.age" /></td>
						<td><input type="text" v-model="user.sex" /></td>
						<td><button @click="confirmUpd()" class="update">更新</button></td>
						<td><button @click="hideDiv()" class="buttonReset">取消</button></td>
					</tr>
				</table>
			</div>
			<!-- 显示数据的div -->
			<div>
				<table width="800px">
					<tr>
						<td colspan="6">
							<h1>用户列表</h1>
						</td>
					</tr>
				</table>
				<table width="800px" class="tableClass1">
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th colspan="2">操作</th>
					</tr>
					<tr v-for="(user1,index) in userList" v-if="index>=userIndex&&index<(userIndex+rows)">
						<td v-text="user1.id"></td>
						<td v-text="user1.name"></td>
						<td v-text="user1.age"></td>
						<td v-text="user1.sex"></td>
						<td><button @click="showDiv(user1)" v-text="updateBtn" class="update"></button></td>
						<td><button @click="confirmDel(user1)" v-text="deleteBtn" class="del"></button></td>
					</tr>

				</table>
				<table width="800px" class="tableClass1">
					<tr>
						<td>
							<button @click="pre()">上一页</button>
						</td>
						<td>
							<button @click="next()">下一页</button>
						</td>
						<td colspan="2"></td>
						<td>
							设置页数:
						</td>
						<td>
							<input type="text" v-model.number.lazy="rows" />
						</td>
					</tr>
				</table>
			</div>

		</div>

		<script src="../../vueDemo/js/vue.js"></script>
		<script src="../../vueDemo/js/axios.js"></script>
		<script>
			const USER = new Vue({
				el: '#user',
				data: {
					user: {
						id: '',
						name: '',
						age: '',
						sex: ''
					},
					userList: [],
					userIndex: 0,
					rows: 5,
					//url的开始部分
					urlHead: 'http://127.0.0.1:8090/',
					//修改按钮显示的字样
					updateBtn: '修改',
					//删除按钮显示的字样
					deleteBtn: '删除',
					//用于更新的div  的样式
					divStyle: { //
						//none是隐藏
						display: 'none',
						//fixed相对浏览器
						//absolute相对父元素
						//relative相对自己
						position: 'fixed',
						//四个数字相等 使居中
						top: 0,
						left: 0,
						right: 0,
						bottom: 0,
						//内边距 使div更靠中间
						'padding-top': '25%',
						// 'margin-left':'-400px',
						// 'margin-top':'10%',
						//设置背景透明
						'background-color': 'rgba(182, 193, 206, 0.5)',
						//元素透明,不透明是1 字也透明了
						// opacity:0.2,
						//使div在最浏览器前显示 盖过其它div
						'z-index': 999

					},
					//父div样式
					divFather: {
						position: 'relative'
					}
				},
				methods: {
					/* 连接后端的一些方法 ajax */
					//查询全部 的 ajax
					async getUserList() {
						const {
							data: result
						} = await axios.get(`${this.urlHead}getAll`)
						this.userList = result
					},
					/* 按 修改按钮 触发 */
					update(user1) {
						this.showDiv()
						this.user = user1
					},
					//更新 的ajax
					async updateUser() {
						//put修改 post添加
						//put post 方式 必须传递 json类型字符串
						let id = this.user.id
						let name = this.user.name
						let age = this.user.age
						let sex = this.user.sex
						// let userJson = `{'id':'${id}','name':'${name}','age':'${age}','sex':'${sex}'}`

						let params = new URLSearchParams()
						params.append('id', id)
						params.append('name', name)
						params.append('age', age)
						params.append('sex', sex)

						await axios.put(`${this.urlHead}update`, params)
						console.log('update')
						this.getUserList()

					},
					//删除 的ajax
					async deleteUser(user1) {
						await axios.delete(`${this.urlHead}delete`, {
							params: {
								id: user1.id
							}
						})
						console.log('del')
						this.getUserList()
					},
					/* 按 删除按钮 触发 */
					confirmDel(user1) {
						let flag = confirm('确认删除?')
						if (flag == 1) {
							this.deleteUser(user1)
						}
					},
					/* 按 更新按钮 触发 */
					confirmUpd(user1) {
						let flag = confirm('确认更新?')
						this.hideDiv()
						if (flag == 1) {
							this.updateUser(user1)
						}
					},

					/* 其他 显示或者隐藏 用于修改的 div */
					//显示 用于更新的 div
					showDiv(user1) {
						this.user=user1
						this.divStyle.display = 'block'
					},
					//隐藏 用于更新的 div
					hideDiv() {
						this.divStyle.display = 'none'
					},
					pre() {
						if (this.userIndex >= this.rows) {
							this.userIndex -= this.rows
						}
					},
					next() {
						if ((this.userIndex + this.rows) < this.userList.length) {
							this.userIndex += this.rows
						}
					}
				},
				mounted() { //挂载: 将 Vue对象实例化 (create vm.$el and replace el with it),与html中的 id为app的元素 对应
					//在挂载后 执行 查询全部
					this.getUserList()
				}
			})
		</script>
	</body>
</html>
